import React, { Component } from 'react';
import './Footer.css'
class Footer extends Component {
    //状态
    state = {
        footer:[   //导航栏数据
            {title:"底部导航",checked:false},
            {title:"练习我们",checked:false},
            {title:"关于我们",checked:false},
            {title:"加入我们",checked:false},
            {title:"哈哈哈",checked:false}
        ],
        index:0   // 控制导航下标样式选中
    }

    updateChecked = function(i){
        return ()=>{
            //输出 下标
            // console.log(i);
            //获取state数据重新赋值
            let newfooter = this.state.footer;
            // 二.  修改上一次导航样式选中
            newfooter[this.state.index].checked = false;
            //修改当前点击行数据的cheched
            newfooter[i].checked = true;

            //修改 数据的 
            this.setState({
                footer:newfooter,   // 设置 toparr新数据
                index:i   // 设置下标数据
            })

        }
    }

    render() {
        return (
            <div className='footer'>
                <ul>
                    {
                        this.state.footer.map((item,index)=>{
                            return <li onClick={this.updateChecked(index)} className={item.checked ? "active" : null} key={index}>{item.title}</li>
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default Footer;